<template>
  <div class="wfull">
    <div class="flex wfull">
      <el-input-tag v-model="data" />
      <ElButton @click="add">+</ElButton>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { open } from '@/components/Popup';
  import { ElButton, ElInputTag } from 'element-plus';
  import { ref, watch } from 'vue';
  import SearchItem from './SearchItem.vue';

  const props = defineProps<{seedName: string, modelValue?: string[]}>()
  const emits = defineEmits(['update:modelValue'])  

  function add() {
    open({title: '新增条件', width: '500px', maxHeight: '200px'}, SearchItem, {seedName: props.seedName, onOk: (value) => data.value.push(value)})
  }

  const data = ref(props.modelValue || [])

  watch([() => props.seedName, () => props.modelValue], () => data.value = props.modelValue || [])
  watch(() => data.value, (val) => emits('update:modelValue', val), {deep: true})
</script>